{{ define "content" }}
<article class="fbox">
    <div class="ui segment">
        <div class="field">
            <label for="input">HTML</label>
            <textarea id="input" class="form-control" rows="8" placeholder="在此输入HTML代码"></textarea>
        </div>
        <div class="field">
            <label for="output">Markdown</label>
            <textarea id="output" onclick="this.focus();this.select();" class="form-control" rows="8" readonly=""></textarea>
        </div>
    </div>
    <form class="contact-form horizontal-form" method="get" action="/turndown" id="options">
        <div class="form-group">
            <label for="headingStyle">标题格式</label>
            <select name="headingStyle" id="headingStyle">
                <option value="setext">setext</option>
                <option value="atx">atx</option>
            </select>
        </div>
        <div class="form-group">
            <label for="hr">水平分隔线</label>
            <select name="hr" id="hr">
                <option value="* * *">* * *</option>
                <option value="- - -">- - -</option>
                <option value="_ _ _">_ _ _</option>
            </select>
        </div>
        <div class="form-group">
            <label for="bulletListMarker">着重号</label>
            <select name="bulletListMarker" id="bulletListMarker">
                <option value="*">*</option>
                <option value="-">-</option>
                <option value="+">+</option>
            </select>
        </div>
        <div class="form-group">
            <label for="codeBlockStyle">代码块样式</label>
            <select name="codeBlockStyle" id="codeBlockStyle">
                <option value="indented">indented</option>
                <option value="fenced">fenced</option>
            </select>
        </div>
        <div class="form-group">
            <label for="fence">代码块分隔符</label>
            <select name="fence" id="fence">
                <option value="```">```</option>
                <option value="~~~">~~~</option>
            </select>
        </div>
        <div class="form-group">
            <label for="emDelimiter">斜体分隔符</label>
            <select name="emDelimiter" id="emDelimiter">
                <option value="_">_</option>
                <option value="*">*</option>
            </select>
        </div>
        <div class="form-group">
            <label for="strongDelimiter">粗体分隔符</label>
            <select name="strongDelimiter" id="strongDelimiter">
                <option value="**">**</option>
                <option value="__">__</option>
            </select>
        </div>
        <div class="form-group">
            <label for="linkStyle">链接样式</label>
            <select name="linkStyle" id="linkStyle">
                <option value="inlined">inlined</option>
                <option value="referenced">referenced</option>
            </select>
        </div>
        <div class="form-group">
            <label for="linkReferenceStyle">参考链接样式</label>
            <select name="linkReferenceStyle" id="linkReferenceStyle">
                <option value="full">full</option>
                <option value="collapsed">collapsed</option>
                <option value="shortcut">shortcut</option>
            </select>
        </div>
    </form>
</article>
{{ end }}
{{ define "extend_script" }}
    <script type="text/javascript" src="/static/js/turndown.js"></script>
    <script type="text/javascript" src="/static/js/html2markdown.js"></script>
{{ end }}